import React, { Component } from "react";
import Comment from "./Comment";
import "../styles/comment.css";

class CommentList extends Component {
  constructor(props) {
    super(props);
  }

  handleDeleteComment(index) {
    if (this.props.onDeleteComment) {
      this.props.onDeleteComment(index);
    }
  }

  render() {
    const { comments } = this.props;
    return (
      <div className="list-wrap">
        {comments.map((comment, key) => (
          <Comment
            key={key}
            comment={comment}
            index={key}
            onDeleteComment={this.handleDeleteComment.bind(this)}
          />
        ))}
      </div>
    );
  }
}

export default CommentList;
